<template>
	<view class="tabbar">
		<view class="icon">
			<view class="block">
				<view class="num">
					{{numb}}
				</view>
			</view>
		</view>
		<view class="price">
			<view class="goods-price">
				￥{{number}}
			</view>
			<view class="dispatching-price">
				配送费：￥5
			</view>
		</view>
		<navigator class="order" url="../pages/order/order">
			立即下单
		</navigator>
	</view>
</template>

<script>
	export default{
		props:["number","numb"],
		data(){
			return{
				
			}
		},
		
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.tabbar{
		width: 100%;
		height: 108rpx;
		display: flex;
		position: fixed;
		bottom:0;
		background-image: url(../static/image/tabbar-bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.icon{
		width: 112rpx;
		height: 90rpx;
		margin-top: 16rpx;
		margin-left: 46rpx;
		position: relative;
		background-image: url(../static/image/tabbar-icon.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.block{
		width: 27rpx;
		height: 27rpx;
		position: absolute;
		top: 16rpx;
		left: 66rpx;
		background: #F70634;
		border-radius: 50%;
	}
	.num{
		text-align: center;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
	.price{
		margin: 26rpx 23rpx;
	}
	.goods-price{
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
	.dispatching-price{
		font-size: 20rpx;
		font-weight: 400;
		color: #CCCCCC;
	}
	.order{
		position: absolute;
		right: 0rpx;
		padding: 0 50rpx;
		line-height: 108rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>
